<template>
<div class="app-home">
  <div class="topUser" @click="isShow=true"></div>
  <div class="appStates">在线</div>
  <van-tabs v-model="tabsActive" animated swipeable color="#3751FF" @click="tabsActiveCall" title-active-color="#2C64EF" line-height="2px" lazy-render>
    <van-tab title="ORG接单">
      <hall v-if="!isOrgList" v-model="isOrgList"></hall>
      <org-list v-if="isOrgList"></org-list>
    </van-tab>
    <van-tab title="进行中">
      <ongoing></ongoing>
    </van-tab>
  </van-tabs>
   <div class="setup-info" :class="{bg:tabsActive === 1 || isOrgList}">
    <span class="icon-setup" v-if="!isOrgList && !tabsActive" @click="$router.push({'path': '/setup'})">设置</span>
    <span v-else></span>
    <span class="icon-kefu" @click="$router.push({'path': '/customer/server'})">客服</span>
  </div>
  <j-lock v-model="isLock"></j-lock>
  <van-popup v-model="isShow" :duration = "duration" position="left" :style="{ height: '100%', width: '70%' }">
    <side-bar></side-bar>
  </van-popup>
</div>
</template>
<script>
// import { mapGetters } from 'vuex';
export default {
  name: 'home',
  data() {
    return {
      duration: 0.2,
      tabsActive: 0,
      isShow: false,
      isOrgList: false,
      isLock: false
    };
  },
  components: {
  },
  // 缓存了页面使用 activated钩子
  created() {
  },
  methods: {
    tabsActiveCall() {
      this.isOrgList = false;
    },
    goLock() {
      this.isLock = true;
    }
  }
};
</script>
<style lang="less" scoped>
.app-home {
 .appStates{
   position: fixed;
   right:36px;
   top:23px;
   font-size: 30px;
   z-index: 999;
 }
 .topUser{
   position: fixed;
   top:23px;
   left:30px;
   width:44px;
   height: 44px;
   background-image: url('../../assets/images/icon-user.png');
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   z-index: 999;
 }
 .setup-info{
      position: fixed;
      z-index: 999;
      bottom: 0;
      left:0;
      right: 0;
      padding: 15px 31px 25px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      .icon-setup,.icon-kefu{
        display: block;
        padding: 0 42px;
        font-size: 32px;
        color: #fff;
        line-height: 80px;
        border-radius: 80px;
        background-color: #2C64EF;
        &::before{
          content: '';
          width:37px;
          height: 35px;
          display: inline-block;
          vertical-align: middle;
          margin-top:-6px;
          margin-right: 8px;
          background-position: left center;
          background-repeat: no-repeat;
        }
      }
      .icon-setup{
        &::before{
          width:37px;
          height: 35px;
          background-image: url('../../assets/images/icon-setup.png');
          background-size: 37px 35px;
        }
      }
      .icon-kefu{
        &::before{
           width:36px;
          height: 38px;
          background-image: url('../../assets/images/icon-kefu.png');
          background-size: 36px 38px;
        }
      }
    }
  .setup-info.bg{
    background-color: #f4f4f4;
  }
}
</style>
